package com.example.composedemo


import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.example.composedemo.ui.theme.Red200
import com.tencent.mmkv.MMKV

@Composable
fun ThemeDemoPage(mainViewModel: MainViewModel) {

    val themeList = mutableListOf<ThemeItem>()
    themeList.add(ThemeItem(ThemeKinds.DEFAULT, "Default", Color.White))
    themeList.add(ThemeItem(ThemeKinds.RED, "Red", Red200))
    themeList.add(ThemeItem(ThemeKinds.YELLOW, "Yellow", Color.Yellow))
    themeList.add(ThemeItem(ThemeKinds.BLUE, "Blue", Color(0xff00E5EE)))
    CustomTheme(mainViewModel) {
        Surface(color = mainViewModel.backgroundColor) {
            Column(
                modifier = Modifier.fillMaxHeight(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                //状态栏留白
                Spacer(Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
                Image(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(20.dp)
                        .clip(
                            RoundedCornerShape(
                                mainViewModel.mediumShapeTopStart,
                                mainViewModel.mediumShapeTopEnd,
                                mainViewModel.mediumShapeBottomStart,
                                mainViewModel.mediumShapeBottomEnd
                            )
                        ),
                    painter = painterResource(id = R.drawable.header),
                    contentScale = ContentScale.FillWidth,
                    contentDescription = "wallpaper"
                )
                Row(
                    modifier = Modifier.height(50.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = "海上夕阳美景图",
                        style = mainViewModel.h4TextStyle
                    )
                }
                LazyRow() {
                    items(themeList) { item: ThemeItem ->
                        ThemeColorCube(themeItem = item, mainViewModel) {
                            //点击色块选择其中的一种颜色
                            MMKV.defaultMMKV().putString(MMKVConstant.ChosenThemeCode, item.id.name)
                            mainViewModel.chosenThemeId.value = item.id.name
                        }
                    }
                }
            }
        }
    }
}


@Composable
fun ThemeColorCube(themeItem: ThemeItem, mainViewModel: MainViewModel, onClick: () -> Unit) {
    Surface(
        shape = RoundedCornerShape(10.dp),
        elevation = 5.dp,
        color = themeItem.mainColor,
        modifier = Modifier
            .size(85.dp)
            .padding(10.dp)
            .clickable {
                onClick()
            }
    ) {
        Row(
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            if (themeItem.id.name == mainViewModel.chosenThemeId.value) {
                Image(
                    modifier = Modifier.size(20.dp),
                    painter = painterResource(id = R.drawable.ic_checkbox_selected_gray),
                    contentScale = ContentScale.FillBounds,
                    contentDescription = "被选中标记图"
                )
            } else {
                Text(
                    text = themeItem.name,
                    textAlign = TextAlign.Center,
                    style = TextStyle(color = mainViewModel.primaryColor)
                )
            }
        }
    }
}


data class ThemeItem(
    val id: ThemeKinds,    //主题 id
    val name: String,    //主题 name
    val mainColor: Color,    //主色
)

enum class ThemeKinds {
    DEFAULT,    //默认主题
    RED,    //红色主题
    YELLOW,    //黄色主题
    BLUE    //蓝色主题
}